<template>
  <div id="app" class="product-freeze">
    <van-nav-bar ref="header" left-arrow title="成品冻结" @click-left="comeBack" left-text="返回">
<!--      <template #title>
        <span @click="prevDayFn">前一天</span>
        <span @click="showCalendar = true" style="margin: 0 10px;">{{ queryDate }}</span>
        <span @click="nextDayFn">后一天</span>
      </template>-->
      <template #right>
        <span @click="showAddDialog = true"><van-icon name="plus" size="20" /></span>
      </template>
    </van-nav-bar>
    <!-- 筛选 -->
    <van-search v-model="queryParam.designNo" placeholder="请输入搜索关键词" @search="refreshPageFn" />
    <!-- 总计 -->
    <van-cell class="freeze-data-total" v-show="freezeData.length !== 0" title="总数" :value="freezeData.length"></van-cell>

    <!-- 滚动 -->
    <better-scroll class="public-scroll" :data="freezeData" :total-page="totalPage" :pulldown="true" :pullup="true" @pullup="loadNextPageFn" @pulldown="refreshPageFn">
      <van-swipe-cell v-for="row in freezeData" :key="row.id" style="padding-bottom: 0.5rem">
        <template>
          <div class="data-card">
            <div style="border-bottom: 1px solid #8191c5; font-size: 1.1rem;color: #1677FF;justify-content: space-between">
              <span>{{ row.designNo }}</span>
              <span v-if="row.cancellerId > 0"><van-tag plain type="warning">已撤销</van-tag></span>
            </div>
            <div style="justify-content: space-between">
              <span style="color: #e6a23c">匹号: {{ row.designSeqNo }}</span>
              <span>状态: {{ checkStatusEnum(row.status) }}</span>
            </div>
            <div>
              <span style="flex: 0 0 23vw;">问题描述: </span>
              <span>{{ row.problemRemark }}</span>
            </div>
            <div style="justify-content: space-between;font-size: 1rem; border-top: 1px solid #8191c5">
              <span>{{ row.operatorName }}</span>
              <span>{{ row.operateAt }}</span>
            </div>
          </div>
        </template>
        <template #right>
          <van-button square text="删除" type="danger" @click="delFreeDataFn(row)" />
          <van-button style="margin-top:5px;" square text="解冻" type="primary" @click="cancelFreezeDataFn(row)" />
        </template>
      </van-swipe-cell>
    </better-scroll>

    <van-dialog v-model="showAddDialog" title="冻结成品" show-cancel-button @confirm="openScanWinFn">
      <van-field label="问题描述" label-width="16vw" colon type="textarea" rows="3" v-model="problemRemark"></van-field>
    </van-dialog>

    <!-- 日期筛选 -->
<!--    <van-calendar
        v-model="showCalendar"
        :min-date="minDate"
        :max-date="maxDate"
        :round="false"
        @confirm="confirmDayFn"
    />-->
  </div>
</template>

<script>
import {openWin,comeBack} from "@/utils";
import {addToFreeze, cancelFreezeData, checkStatusEnum, delFreezeData, loadFreezeData} from "@/api/product";
import {getInfo} from "@/utils/auth"
import dayjs from "dayjs";


export default {
  name: "productFreeze",
  data() {
    return {
      /* 查询相关 */
      /*showCalendar: false,
      queryDate: dayjs().format("YYYY-MM-DD"),
      minDate: new Date(dayjs().subtract(1, "year")),
      maxDate: new Date(),*/
      queryParam: {
        designNo: "",
        pageNum: 1,
        pageSize: 6,
      },

      /* 列表相关 */
      freezeData: [],
      totalPage: 0,

      /* 操作相关 */
      showAddDialog: false,
      problemRemark: "",
    };
  },
  mounted() {
    const that = this;
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        that.initFn(that);
      });
    } else {
      window.apiready = function () {
        that.initFn(that);
      };
    }

    // that.initFn(that);   //dev fixme
  },
  methods: {
    comeBack,
    checkStatusEnum,

    //初始化
    initFn(that) {
      that.loadFreezeDataFn(1);
    },

    /*// 前一天
    prevDayFn() {
      let that = this;
      that.queryDate = dayjs(that.queryDate).subtract(1, "day").format("YYYY-MM-DD");
    },
    // 后一天
    nextDayFn() {
      let that = this;
      if (that.queryDate === dayjs().format("YYYY-MM-DD")) {
        that.$toast.fail("明天还没到");
        return false;
      }
      that.queryDate = dayjs(that.queryDate).add(1, "day").format("YYYY-MM-DD");
    },
    // 时间筛选
    confirmDayFn(val) {
      let that = this;
      that.queryDate = dayjs(val).format("YYYY-MM-DD");
      that.showCalendar = false;
    },*/

    //打开扫码窗口
    openScanWinFn() {
      const that = this;
      if(that.problemRemark == "") {
        that.$toast.fail("必须输入冻结原因");
        return;
      }
      const zyHmsScan = api.require('zyHmsScan');
      zyHmsScan.openDefaultView({}, ret => {
        if(ret.status) {
          let content = ret.result;
          if (content.indexOf("http://") >= 0) {
            content = content.substring(content.lastIndexOf("/")+1, content.length);
          }
          let contents = content.split("?");
          let params = {};
          params.clothId = contents[0];
          if(contents[1]) {
            params.flag = 1;
          }
          params.problemRemark = that.problemRemark;
          addToFreeze(params, data => {
            that.freezeData.splice(0, 0, data);
            that.$toast.success({
              type: "success",
              message: "冻结成功,请继续",
              onClose: function () {
                that.openScanWinFn();
              },
              duration: 1500
            })
          });
        }
      });
    },

    //加载冻结数据
    loadFreezeDataFn(pageNum) {
      let that = this;
      if(pageNum == 1) {
        that.queryParam.pageNum = pageNum;
      }
      loadFreezeData(that.queryParam, data => {
        that.totalPage = data.totalPage;
        data.list.forEach(row => {
          that.freezeData.push(row);
        });
      });
    },

    //刷新
    refreshPageFn() {
      let that = this;
      that.freezeData.splice(0, that.freezeData.length);
      that.loadFreezeDataFn(1);
    },

    //加载下一页
    loadNextPageFn() {
      let that = this;
      that.queryParam.pageNum++;
      that.loadFreezeDataFn();
    },

    //删除冻结数据
    delFreeDataFn(row) {
      let that = this;
      delFreezeData({id: row.id}, () => {
        that.$toast.success("删除成功");
        that.freezeData.splice(that.freezeData.findIndex(data => data.id == row.id), 1);
      });
    },

    //撤销冻结
    cancelFreezeDataFn(row) {
      let that = this;
      cancelFreezeData({id: row.id}, () => {
        that.$toast.success("撤销成功");
        row.cancellerId = getInfo().userId;
      });
    },
  }
}
</script>

<style lang="scss">
.product-freeze {
  height: 100%;
  .van-search {
    z-index: 1;
  }
  .freeze-data-total {
    span {
      color: #1989fa;
      font-size: 1rem;
    }
  }
  .public-scroll {
    height: 79vh;
    .van-swipe-cell__right {
      display: flex;
      flex-flow: column;
    }
    .data-card {
      width: 96vw;
      padding: 0.8rem;
      margin-left: 2vw;
      background-color: white;
      margin-top: 0.5rem;
      box-shadow: 0.3rem 0.5rem 0.3rem #888888;
      div {
        display: flex;
        padding: 0.3rem 0rem;
        span {
          line-height: 1rem;
        }
      }
    }
  }
}
</style>